<template>
  <div class="h-full w-full bg-thin overflow-hidden flex flex-col">
    <Header />
    <div class="overflow-auto flex-1 flex justify-between p-2 h-full">
      <div class="w-[350px] h-full flex flex-col 2xl:w-96">
        <UserCard desc="用户信息卡" :config-codes="BIDataCodes" />
        <RouterCard desc="路由信息卡" />
      </div>
      <div class="flex-1 h-full pl-2 flex flex-col overflow-hidden">
        <div class="flex flex-wrap">
          <DataCard desc="今日数据卡" class="w-2/3 pr-2 h-48 2xl:h-72" :config-codes="BIDataCodes" />
          <TodoCard desc="今日待办卡" class="w-1/3 pr-2 h-48 2xl:h-72" />
        </div>
        <div class="flex-1 h-0 overflow-y-auto mt-2 flex flex-wrap content-start">
          <template v-for="item in BIChartFilter" :key="item.id">
            <component :is="BIChartComponent[item.componentName]" class="w-1/2 pr-2 mb-2" />
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { message } from 'ant-design-vue'
import Header from '@/layouts/Header'
import useUserStore from '@/store/user'
import useAppStore from '@/store/app'
import UserCard from './components/UserCard'
import RouterCard from './components/RouterCard'
import DataCard from './components/DataCard'
import TodoCard from './components/TodoCard'
import FirstSecondTime from './components/FirstSecondTime'
import FocusItem from './components/FocusItem'
import TodayMoney from './components/TodayMoney'
import TodayOperation from './components/TodayOperation'
import DayRegister from './components/7DayRegister'
import MedicalMatters from './components/MedicalMatters'

const BIChartComponent = {
  FirstSecondTime,
  FocusItem,
  TodayOperation,
  TodayMoney,
  DayRegister,
  MedicalMatters
}
const BIChartData = ref([
  { biCode: 'Number_of_initial_Follow-up_Visits_By_Each_Doctor', desc: '各个医生初复诊人数', componentName: 'FirstSecondTime' },
  { biCode: 'Proportion_Of_Patients Following_The_Project', desc: '关注项目患者占比', componentName: 'FocusItem' },
  { biCode: 'Today_surgery', desc: '今日手术', componentName: 'TodayOperation' },
  { biCode: 'Today_Business', desc: '今日营业额', componentName: 'TodayMoney' },
  { biCode: '7-Day_Reservation_Conversion', desc: '7日预约转化', componentName: 'DayRegister' },
  { biCode: 'Patient_visits_for_medicalmatters', desc: '就诊事项患者人次', componentName: 'MedicalMatters' }
])
const BIChartFilter = ref([])
const { empId } = useUserStore()
const appStore = useAppStore()
const BIDataCodes = ref([])
const getBIConfig = async () => {
  const { code, data = [], msg } = await post('/common/portal/getDictPermissionBiByEmpList', { empId })
  if (code !== 0) return message.error(msg)
  if (data.length === 0) return
  BIDataCodes.value = data
    .filter((item) => item.styleName === '数字指标')
    .sort((a, b) => parseInt(a.outOrder) - parseInt(b.outOrder))
    .map((item) => item.biCode)
  const BIChartCodes = data
    .filter((item) => item.styleName !== '数字指标')
    .sort((a, b) => parseInt(a.outOrder) - parseInt(b.outOrder))
    .map((item) => item.biCode)
  BIChartFilter.value = BIChartCodes.map((item) => {
    return BIChartData.value.find((i) => i.biCode === item)
  })
}
onMounted(() => {
  getBIConfig()
  document.title = getSystemConfig('HISNAME') || '医疗信息系统' //系统名称
  appStore.CURRENT_ROUTE_NAME = ''
})
</script>
<style lang="less" scoped>
:deep(.ant-tabs-tab) {
  padding: 8px 0;
}
:deep(.ant-empty-normal) {
  margin-block: 0;
  padding-top: 32px;
}
</style>
